<template>
  <view>
    <z-paging
      ref="paging"
      style="background-color: #eeeeef"
      v-model="itemList"
      @query="queryList"
      :fixed="true"
      :auto="false"
      :auto-show-back-to-top="true"
      :empty-view-img="`${getImageUrl('empty.png')} `"
      empty-view-text="暂无数据~"
      :empty-view-img-style="imgStyle"
    >
      <view slot="top">
        <u-navbar
          backIconColor="#fff"
          title-size="36"
          title-color="#fff"
          :background="background"
          :border-bottom="false"
        >
          <view class="slot-wrap" v-if="cateInfo">
            <view class="cate-box">
              <view class="cate-name">
                <text class="cate-name-text">{{ cateInfo.name }}</text>
                <u-icon name="/static/close.png" size="20"></u-icon>
              </view>
            </view>
            <view @click="routeTo('/shops/category')" class="all-cate dis-flex flex-y-center">
              <u-icon name="/static/all.png" size="40"></u-icon>
              <text class="all-cate-text">分类</text>
            </view>
          </view>
        </u-navbar>

        <view class="shaixun-box">
          <view class="sx-l">
            <view
              class="sx-item"
              :style="sortField == 0 ? 'color:#10A28F;' : ''"
              @click="onSortField(0)"
            >
              <text>综合</text>
            </view>
            <view
              class="sx-item"
              :style="sortField == 2 ? 'color:#10A28F;' : ''"
              @click="onSortField(2)"
            >
              <text>销量高</text>
            </view>
            <view class="sx-item dis-flex flex-y-center" @click="onSortField(1)">
              <text :style="sortField == 1 ? 'color:#10A28F;' : ''">价格</text>
              <view class="dis-flex" style="flex-flow: column; margin-left: 10rpx">
                <u-icon
                  name="arrow-up"
                  :color="sortField == 1 && sortAsc ? '#10A28F' : 'rgb(192, 196, 204)'"
                  size="20"
                ></u-icon>
                <u-icon
                  name="arrow-down"
                  :color="sortField == 1 && !sortAsc ? '#10A28F' : 'rgb(192, 196, 204)'"
                  size="20"
                ></u-icon>
              </view>
            </view>
          </view>
          <u-dropdown @open="open" @close="close" active-color="#10A28F" ref="uDropdown">
            <u-dropdown-item v-model="recommend" title="筛选" :options="options1"></u-dropdown-item>
          </u-dropdown>
        </view>
        <view class="content">
          <u-gap height="20"></u-gap>
          <GoodsBox :itemList="itemList"></GoodsBox>
        </view>
      </view>
    </z-paging>
  </view>
</template>

<script>
import GoodsBox from './components/goods_box.vue'
export default {
  components: {
    GoodsBox
  },
  data() {
    return {
      recommend: 0,
      options1: [
        {
          label: '平台精选',
          value: 1
        },
        {
          label: '热销爆款',
          value: 2
        },
        {
          label: '新品上架',
          value: 3
        },
        {
          label: '补贴优品',
          value: 4
        }
      ],
      cateInfo: {},
      background: {
        background: '#10A28F'
      },
      imgStyle: {
        width: '12rem'
      },
      itemList: [],
      sortField: null,
      sortAsc: false
    }
  },
  onLoad(options) {
    this.cateInfo = options.cate ? JSON.parse(options.cate) : null
    this.queryList()
  },
  methods: {
    onSortField(index) {
      this.sortField = index
      if (index == 1) this.sortAsc = !this.sortAsc
      else {
        this.sortAsc = false
      }

      this.$refs.uDropdown.highlight()
      this.queryList()
    },
    open(index) {
      // 展开某个下来菜单时，先关闭原来的其他菜单的高亮
      // 同时内部会自动给当前展开项进行高亮
      this.$refs.uDropdown.highlight()
      this.sortField = null
    },
    close(index) {
      // 关闭的时候，给当前项加上高亮
      // 当然，您也可以通过监听dropdown-item的@change事件进行处理
      this.$refs.uDropdown.highlight(index)
    },
    queryList(pageNo = 1, pageSize = 10) {
      this.$u
        .get('/app-api/product/spu/page', {
          pageNo,
          pageSize,
          sortField: this.sortField,
          sortAsc: this.sortAsc,
          recommend: this.recommend,
          platformCategoryIds: [this.cateInfo.id]
        })
        .then((res) => {
          this.$refs.paging.complete(res.data.list)
        })
    },
    routeTo(url) {
      uni.navigateTo({
        url: url
      })
    }
  }
}
</script>

<style lang="scss">
.slot-wrap {
  display: flex;
  align-items: center;

  .cate-box {
    width: 360rpx;
    height: 72rpx;
    background: #ffffff;
    border-radius: 10rpx;
    padding: 8rpx 10rpx;

    .cate-name {
      width: 172rpx;
      height: 56rpx;
      background: #e6e6e6;
      border-radius: 10rpx;
      line-height: 56rpx;
      text-align: center;

      &-text {
        font-size: 28rpx;
        color: #666666;
        margin-right: 10rpx;
      }
    }
  }

  .all-cate {
    flex-flow: column;

    margin-left: 30rpx;

    &-text {
      font-size: 26rpx;
      color: #ffffff;
      margin-top: 2rpx;
    }
  }
}

.screen {
  height: 90rpx;
  background: #ffffff;
  line-height: 90rpx;
  padding: 0 30rpx;
  font-size: 28rpx;
}

.shaixun-box {
  position: relative;
  padding: 0 20rpx;
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
  background: #fff;

  .sx-l {
    display: flex;
    position: absolute;
    top: 10rpx;
    justify-content: space-between;
    width: 69%;
    z-index: 9999;

    .sx-item {
      height: 30px;
      background: #ffffff;
      border-radius: 5px;
      line-height: 30px;
      padding: 0 6px;
      font-size: 14px;
      color: #333333;
      margin-right: 20rpx;
    }
  }
}

::v-deep.shaixun-box .u-dropdown .u-dropdown__menu {
  justify-content: space-between;
  padding-left: 84%;

  .u-dropdown__menu__item {
    // width: 25%;
    flex: none;

    .u-flex {
      height: 30px;
      background: #ffffff;
      border-radius: 5px;
      line-height: 30px;
      padding: 0 6px;
      font-size: 14px;
      color: #333333;
    }
  }
}
</style>
